import { connect } from "react-redux";
import { increment, decrement } from "./store/actions/counter";

// UI组件
function App(props: any) {
  const { counter, increment, decrement } = props;

  const handleIncrement = () => {
    increment(1);
  };

  const handleDecrement = () => {
    decrement(1);
  };

  return (
    <>
      <div>App {counter}</div>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </>
  );
}

// 容器组件：将redux的数据和更新数据的方法，以props方式传递给UI组件
// 高阶组件：connect -> HOC High Order Component
// 本质上是一个函数，调用函数接受组件作为参数，返回一个新组件
const mapStateToProps = (state: any) => {
  return {
    counter: state.counter,
  };
};

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
